<template>
  <div class="container">
    <!-- 扑克卡片 -->
    <div
      v-for="(card, index) in cards"
      :key="index"
      class="poker absolute w-[20rem] h-[26rem] border-[0.15rem] border-white rounded-[1.5rem] bg-green-400 overflow-hidden transform origin-bottom-left transition-transform duration-300"
      :style="{ transform: card.transform, zIndex: card.zIndex }"
    >
      <img :src="card.image" class="w-full h-full object-cover relative" alt="poker" />
    </div>

    <!-- 顶部可点击区域 -->
    <div
      class="poker-top absolute w-[20rem] h-[26rem] border-[0.15rem] border-white rounded-[1.5rem] cursor-pointer z-[1000] transition-colors duration-300"
      :class="{
        'bg-white': cards[4].zIndex === 0,
        'bg-gray-300': cards[4].zIndex !== 0,
      }"
      @click="move"
    >
      <div class="columns-2 pt-20">
        <span class="next-font">The </span>
        <svg
          t="1748337925041"
          class="icon"
          viewBox="0 0 3736 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="9387"
          width="100"
          height="100"
        >
          <path
            d="M0 595.324463h2706.21085l-182.370522 428.675537 1212.65916-511.475947L2523.840328 0l182.370522 428.675537H0v166.648926z"
            p-id="9388"
            data-spm-anchor-id="a313x.search_index.0.i2.6e8f3a813E3Wy3"
            class=""
            fill="#ffffff"
          ></path>
        </svg>
      </div>
      <div class="columns-1">
        <span class="next-font">NEXT</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps, onMounted, watch } from "vue";

// 定义 props
interface Props {
  images: string[]; // 图片地址数组，来自外部
}

const props = defineProps<Props>();

// 动态变换配置
const transformDatas = [
  "rotate(-10deg)",
  "rotate(-6deg) translate(35%, -12%)",
  "rotate(-2deg) translate(65%, -19%)",
  "rotate(2deg) translate(95%, -26%)",
  "rotate(6deg) translate(125%, -23%)",
];

// 卡片数据结构
interface Card {
  image: string;
  transform: string;
  zIndex: number;
}

// 初始化卡片数组
const cards = ref<Card[]>([]);
let imgIndex = ref<number>(0); // 当前要显示的下一张图片索引
const images = ref<string[]>([]);
// 初始化函数
function init() {
  images.value = [
    "@/assets/img/bg.jpg",
    "@/assets/img/bg.jpg",
    "@/assets/img/bg.jpg",
    "@/assets/img/bg.jpg",
    "@/assets/img/bg.jpg",
  ];
  if (props.images.length < 5) {
    console.warn("需要至少5张图片");
    return;
  }

  cards.value = props.images.slice(0, 5).map((src, index) => ({
    image: src,
    transform: transformDatas[index],
    zIndex: index,
  }));

  imgIndex.value = props.images.length - 1; // 第6张开始轮换
}

const isMoving = ref(false); // 添加防抖状态
// 移动卡片逻辑
function move() {
  if (isMoving.value) return; // 如果正在执行动画，则阻止再次调用
  cards.value.forEach((card) => {
    const nextZIndex = (card.zIndex + 1) % cards.value.length;
    card.zIndex = nextZIndex;
    if (nextZIndex === 0) {
      // 如果是第一张牌，则更新为下一个图片
      card.image = props.images[imgIndex.value];
      imgIndex.value = (imgIndex.value + 1) % props.images.length;
    }
    card.transform = transformDatas[nextZIndex];

    // 动画结束后恢复状态（假设动画时间为300ms）
    setTimeout(() => {
      isMoving.value = false;
    }, 300);
  });
}

// 监听 images 变化，重新初始化
watch(
  () => props.images,
  () => {
    init();
  },
  { immediate: true },
);

onMounted(() => {
  init();
});
</script>

<style scoped lang="scss">
.container {
  position: relative;
  width: 45rem;
  height: 25rem;
  margin-bottom: 1rem;
}

.poker-top {
  background-color: transparent;
}
.next-font {
  font-size: 80px;
  color: $font-color;
  user-select: none;
}
</style>
